<template>
  <div class="ContentAudio">
    <div class="ContentAudio_left">
      <!-- 标题 -->
      <p class="ContentAudio_title">{{ Contentpart.title }}</p>
      <!-- 音乐进度盒子 -->
      <div class="ContentAudio_audio_box">
        <div class="ContentAudio_audio_line">
          <!-- 圆点 -->
          <div class="ContentAudio_audio_circle"></div>
          <!-- 颜色进度条 -->
          <div class="ContentAudio_audio_bar"></div>
        </div>
        <!-- 进度文字 -->
        <div class="ContentAudio_audio_text">
          <p>00:00</p>
          <p>{{ Contentpart.duration_str }}</p>
        </div>
      </div>
    </div>
    <!-- 右边点击切换播放状态 -->
    <div class="ContentAudio_right">
      <van-icon
        v-show="ContentAudioShow"
        name="play-circle"
        color="#2d4d6e"
        size="32"
      />
      <van-icon
        v-show="!ContentAudioShow"
        name="pause-circle"
        color="#2d4d6e"
        size="32"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: "ContentAudio",
  props: ["Contentpart"],
  data() {
    return {
      ContentAudioShow: true,
    };
  },
};
</script>

<style lang="scss" scoped>
.ContentAudio {
  height: 3.75rem;
  border: 0.5px solid #eee;
  padding: 0.375rem;
  margin: 1.25rem 0;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  //   左边文字 和播放进度条
  .ContentAudio_left {
    width: 85%;
    .ContentAudio_title {
      font-size: 0.75rem;
      font-family: "微软雅黑";
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      margin-bottom: 0.5rem;
    }
    // 音频进度条盒子
    .ContentAudio_audio_box {
      // 灰色线
      .ContentAudio_audio_line {
        height: 1px;
        background: #ccc;
        //   进度条颜色覆盖
        .ContentAudio_audio_bar {
          height: 1px;
          width: 50px;
          background-color: #cfbd8c;
          position: relative;
          &::before {
            content: "";
            display: inline-block;
            width: 8px;
            height: 8px;
            background-color: white;
            border: 2px solid #cfbd8c;
            border-radius: 50%;
            position: absolute;
            top: -5px;
            left: 50px;
          }
        }
      }
      .ContentAudio_audio_text {
        color: var(--fontcolor);
        padding-top: 0.25rem;
        font-size: 0.75rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }
  }
  //   右边播放按钮
  .ContentAudio_right {
  }
}
</style>